import React, { Component } from "react";
import "./index.less";
import { Modal, Input, Select, Button, Cascader, Table, Radio } from "antd";
import Img from "../../assets/images/logo.png";
import { Link } from "react-router-dom";
import addressData from "../../config/cityConfig";
import AddnewAddress from "../../components/addnew-address";
const { Option } = Select;
const { TextArea } = Input;

export default class GoodsList extends Component {
  state = {
    // 更多弹窗默认关闭
    is_open: false,
    // 发货失败弹窗默认关闭
    is_visible: false,
    //订单发货弹窗默认关闭
    is_orders_shipment: false,
    // 备注弹窗默认关闭
    is_remark: false,
    more_index: 0,
    // 单选框
    value: 1
  };
  list = [
    { time: "1-1-1", name: "aaa" },
    { time: "2-2-2", name: "bbb" },
    { time: "3-3-3", name: "ccc" },
    { time: "4-4-4", name: "ddd" }
  ];
  handleMore(e, i) {
    console.log(e);
    console.log(i);
    this.setState({
      is_open: !this.state.is_open,
      more_index: i
    });
  }
  more = (is_open, i) => {
    console.log(is_open, i);
    return is_open ? (
      <div className="more-model">
        <div>外部订单号：E237856384956983797835687</div>
        <div>支付流水号：2937459283769426</div>
        <div className="top-arrow"></div>
      </div>
    ) : null;
  };
  showModal(param) {
    // 0代表发货失败
    if (param === 0) {
      this.setState({
        is_visible: true
      });
    } else {
      this.setState({
        is_orders_shipment: true
      });
    }
    console.log(param);
  }

  hideModal = () => {
    this.setState({
      is_visible: false,
      is_orders_shipment: false
    });
  };
  // 备注弹窗开启
  showRemarkModel = () => {
    this.setState({
      is_remark: true
    });
  };
  // 备注弹窗关闭
  hideRemarkModal = () => {
    this.setState({
      is_remark: false
    });
  };

  // 单选框
  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  render() {
    const columns = [
      {
        width: 250,
        title: "商品",
        dataIndex: "name",
        render: text => (
          <div className="order-info-table">
            <img src={Img} alt="" />
            <div className="order-info">
              <div>高级木椅</div>
              <div>源自大师手艺，注入心血</div>
            </div>
          </div>
        )
      },
      {
        title: "数量",
        dataIndex: "num"
      },
      {
        title: "状态",
        dataIndex: "address"
      },
      {
        title: "运单号",
        dataIndex: "age"
      }
    ];
    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 3524524552,
        num: 7,
        address: "待发货"
      }

      // {
      //   key: "4",
      //   name: "Disabled User",
      //   age: 524542623499,
      //   num: 22,
      //   address: "待发货"
      // }
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: record => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name
      })
    };
    return (
      <div>
        {this.list.map((item, index) => {
          return (
            <div key={index} className="goods-list">
              {/* 订单信息 */}
              <div className="list-top">
                <div className="order-info">
                  <div>订单号：E283752745697249856794</div>
                  <div
                    className="more"
                    onClick={e => this.handleMore(e, index)}
                  >
                    更多
                    {/* 更多弹窗 */}
                    {this.more(this.state.is_open, index)}
                  </div>
                  <div>下单时间：{item.time}</div>
                  <div className="method-payment">微信商城 / 微信支付</div>
                </div>
                <div className="remark">
                  <Link to="/orderquery/detail">查看详情</Link> <b>-</b>
                  <span onClick={this.showRemarkModel}>备注</span>
                </div>
              </div>
              {/* 列表部分 */}
              <table>
                <tbody>
                  <tr>
                    <td>
                      <div className="flex-td first-td">
                        <img src={Img} alt="" />
                        <div className="space-letter area">
                          <div className="flex-h">
                            <div>高级木椅</div>
                            <div>¥123.00</div>
                          </div>
                          <div className="flex-h">
                            <div>源自大师手艺，注入心血</div>
                            <div>1件</div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div className="space-letter">买家发起维权</div>
                    </td>
                    <td>
                      <div className="space-letter">{item.name}</div>
                    </td>
                    <td>
                      <div className="space-letter">快递</div>
                    </td>
                    <td>
                      <div className="space-letter">¥123</div>
                    </td>
                    <td>
                      <div className="space-letter">等待卖家发货</div>
                    </td>
                    <td>
                      <div
                        className="space-letter send"
                        onClick={() => this.showModal(this.state.more_index)}
                      >
                        发送
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              {/* 备注部分 */}
              {8 > 4 ? (
                <div className="host-remark">
                  客人要求精美包装加卡片，卡片内容：祝福如东海寿比南山
                </div>
              ) : null}
            </div>
          );
        })}
        <Modal
          style={{ marginTop: 180 }}
          width="620px"
          title="发货失败"
          visible={this.state.is_visible}
          // onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="保存"
          footer={[
            <Button key="submit" type="primary" onClick={this.hideModal}>
              保存
            </Button>
          ]}
          // footer={null}
          // cancelText="取消"
        >
          <div className="failure">
            <div className="failure-shows">
              你还未填写默认退货地址，为保证消费体验，请先填写默认退货地址再进行发货哦
            </div>
            <AddnewAddress />
          </div>
        </Modal>
        {/* 订单发送弹窗 */}
        <Modal
          style={{ marginTop: 100 }}
          width="700px"
          title="订单发货"
          visible={this.state.is_orders_shipment}
          // onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="保存"
          footer={[
            <Button key="submit" onClick={this.hideModal}>
              发货
            </Button>
          ]}
        >
          {/* 选择商品 */}
          <div className="order_shipment">
            <div>
              <span className="sel-goods">选择商品</span>
              <span className="goods-state-one">待发货1</span>
              <span>已发货0</span>
            </div>
          </div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
            pagination={false}
          />
          {/* 配送信息 */}
          <div className="shipping-info">
            <div className="part-title">配送信息</div>
            <div className="part">
              <div>配送方式：快递</div>
              <div className="person">收货人：阿好 15678903456</div>
              <div>收货地址：浙江省杭州市滨江区，花园，3幢501</div>
            </div>
          </div>
          {/* 发货方式 */}
          <div className="shipping-info shipping-style">
            <div className="part-title">发货方式</div>
            <div className="part">
              <div>
                <Radio.Group onChange={this.onChange} value={this.state.value}>
                  <Radio value={1}>自己联系快递</Radio>
                  <Radio value={2}>无需物流</Radio>
                </Radio.Group>
              </div>
              <div className="person">
                物流公司：
                <Select
                  defaultValue="lucy"
                  style={{ width: 155 }}
                  // onChange={}
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">请选择一个物流公司</Option>
                </Select>
              </div>
              <div>
                快递单号：
                <Input style={{ width: 155 }} />
              </div>
              <div className="tip">
                *请仔细填写物流公司及快递单号，发货后24小时内仅支持做一次更正，逾期不可修改
              </div>
            </div>
          </div>
        </Modal>
        {/* 备注 */}
        <Modal
          style={{ marginTop: 180 }}
          width="620px"
          title="备注"
          visible={this.state.is_remark}
          // onOk={this.hideModal}
          onCancel={this.hideRemarkModal}
          okText="保存"
          footer={[
            <Button key="submit" type="primary" onClick={this.hideRemarkModal}>
              保存
            </Button>
          ]}
          // footer={null}
          // cancelText="取消"
        >
          <div className="remark-model">
            <div>备注内容：</div>
            <div>
              <TextArea
                style={{ width: 517 }}
                rows={4}
                placeholder="请填写详细地址，如街道名称，门牌号等信息"
              />
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}
